<!DOCTYPE html>
<html>

<head>
  <meta charset='UTF-8'>
  <title>毕业证书</title>
  <meta name="viewport" content="width=device-width">
  <!-- favicon图标 -->
  <link rel="shortcut icon" href="../../static/favicon.png" type="image/x-icon">
  <!-- 51la网站统计 -->
  <script src="../../static/js/tongji.js"></script>
  <link rel="stylesheet" href="./css/index.css">

</head>

<body>
  <div id="app" class="container">

    <!-- ------------------------ 头部 ------------------------ -->
    <header>
      <div class="toubu" v-if="datas.title">
        <ul>
          <li></li>
          <li>
            <h2 @dblclick="shuangji()">{{datas.title}}</h2>
          </li>
          <li></li>
        </ul>
      </div>
    </header>

    <!-- ------------------------ 主体 ------------------------ -->
    <main>
      <div class="one list-wrap" v-for="(item, index) in datas.one.data" :key="index">
        <img :src="item.imgurl" :id="item.text">
        <p>{{item.text}}</p>
      </div>
      <div class="two list-wrap" v-for="(item, index) in datas.two.data" :key="index" v-show="index<page">
        <img :src="item.imgurl" :id="item.text">
        <p>{{item.text}}</p>
      </div>
    </main>

    <!-- ------------------------ 底部 ------------------------ -->
    <footer>
      <ul>
        <li>&copy;</li>
        <!-- <li><a href="//bealei.com">bealei</a></li>
        <li>by</li> -->
        <li><a href="//zhuanglei.top">zhuanglei</a></li>
      </ul>
    </footer>
    <!-- ------------------------ 侧边栏 ------------------------ -->
    <aside>
      <h4>大纲目录</h4>
      <dl>
        <dt>{{datas.title}}</dt>
        <dd v-for="(item, index) in  datas.one.data" :key="index">
          <a :href="'#'+item.text">{{item.text}}</a>
        </dd>
        <dd v-for="(item, index) in  datas.two.data" :key="index" v-show="index<page">
          <a :href="'#'+item.text">{{item.text}}</a>
        </dd>
      </dl>
    </aside>

  </div>

</body>

<!-- vue 3.3.3 -->
<script src="./js/vue.global-3.3.3.min.js"></script>
<script src="./js/jquery-3.6.3.slim.min.js"></script>
<script src="./js/datajson.js"></script>
<script src="./js/shuiyin.js"></script>

<script type="text/javascript">

  const { createApp, ref } = Vue

  createApp({
    data() {
      return {
        datas: res.content,
        page: 2,
      }

    },
    methods: {
      // 展示小学初中高中
      shuangji() {

        if (this.page == 2) {
          this.page = 5
        } else {
          this.page = 2
        }
        gundong()
        console.log("this.page: " + this.page)
      }
    }

  }).mount('#app')
</script>

<script src="./js/index.js"></script>

</html>